<template>
	<view class="w">
		<!-- 视频 -->
		<view class="videoContent">
			<video src="https://cdn.uviewui.com/uview/resources/video.mp4" controls></video>
		</view>
		<!-- tab切换-->

		<!-- tab栏切换 -->
		<view class="tabs">
			<u-tabs-swiper ref="uTabs" :list="tablist" :current="current" @change="tabsChange" :is-scroll="false"
				:swiperWidth="750" font-size="30"></u-tabs-swiper>
		</view>
		<view class="tabContent">
			<swiper :style="{ height: swiperHeight }" class="swiper" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<!-- 免费好课 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
						<!-- 课程介绍内容 -->
						<view class="content">
							<!-- 简介-->
							<view class="info">
								<text>线性代数</text>
								<text>观看人数88.88w</text>
								<text>老师：吴云</text>
								<text>课程介绍：线性代数是数学的分支，它的研究对象是向量，向量空间线性代数是数学的分支，它的研究对象是向量，向量空间线性代数是数学的分支，它的研究对象是向量，向量空间线性代数是数学的分支，它的研究对象是向量，向量空间线性代数是数学的分支，它的研究对象是向量，向量空间</text>
							</view>
							<text>展开更多</text>
							<!-- 内容 -->
							<view class="other">
							<text>课程纲要</text>
							<view class="item">
								<text>1.线性代数_第一讲</text>
							</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 课件-->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y @scrolltolower="onreachBottom">
						<!--  -->
						<view class="">
							暂无更多
						</view>
					</scroll-view>
				</swiper-item>

				<!-- 评论 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y @scrolltolower="onreachBottom">
						<!--  -->
						<view class="">
							暂无更多
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>







<script>
	export default {
		data() {
			return {
				current: 0,
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				// content高度
				swiperHeight: '',
				tablist: [{
						name: '课程介绍'
					},
					{
						name: '课件'
					},
					{
						name: '评论(1234)'
					}
				],
				current: 0,
				swiperCurrent: 0
			}
		},
		onLoad() {
			// 获取设备信息
			this.sysInfo = uni.getSystemInfoSync();
			this.winWidth = this.sysInfo.screenWidth;
			this.swiperHeight = (this.sysInfo.windowHeight - 40 - 50) * 2 + 'rpx';
		},
		methods: {
			tabsChange(index) {
				// console.log(index)
				this.swiperCurrent = index
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {},
		}
	}
</script>

<style lang="scss" scoped>
	.w {

		padding: 10rpx 30rpx;
	}

	.videoContent>video {
		width: 100%;
	}
	.tabs{
		border-bottom: 1px solid #ccc;
		margin: 20rpx 0;
	}
	// 
	.info{
		display: flex;
		flex-direction: column;		
	}
	.info>text{
		font-size: 25rpx;
		color: #2e2e2e;
		margin-top: 15rpx;
		
	}
	.info>text:first-child{
		color: #000;
		font-weight: 700;
		font-size: 40rpx;
	}
	.info>text:nth-child(4){
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.content{
		position: relative;
	}
	.content>text{
		color: red;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,100%);
		font-size: 25rpx;
		color: #2e2e2e;
	}
	
	//
	.other{
		margin-top: 50rpx;
	}
	.other>text{
		margin-top: 50rpx;
		
		font-weight: 700;
	}
	.other .item{
		margin-top: 20rpx;
		padding: 20rpx 15rpx;
		font-size: 30rpx;
		border: 1px solid #ccc;
		box-shadow: 1rpx 1rpx 12rpx #ccc; 
		
	}
</style>

